<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="图片id" prop="id" v-if="dataForm.id">
        <el-input
          v-model="dataForm.id"
          placeholder="图片id"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="图片标识" prop="fileName">
        <el-input
          v-model="dataForm.fileName"
          placeholder="存储图片名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="图片url" prop="imgUrl" v-if="dataForm.id">
        <el-input v-model="dataForm.imgUrl" placeholder="图片url" disabled></el-input>
      </el-form-item>
      <el-form-item label="缩略图" prop="thumbUrl" v-if="dataForm.id">
        <el-input v-model="dataForm.thumbUrl" placeholder="缩略图" disabled></el-input>
      </el-form-item>
      <el-form-item label="图片类型" prop="type" v-if="dataForm.id">
        <el-input v-model="dataForm.type" placeholder="图片类型" disabled></el-input>
      </el-form-item>
      <el-form-item label="文件大小" prop="fileSize" v-if="dataForm.id">
        <el-input v-model="dataForm.fileSize" placeholder="文件大小" disabled></el-input>
      </el-form-item>
      <!-- <el-form-item label="逻辑删除状态" prop="delFlag" v-if="dataForm.id">
        <el-input
          v-model="dataForm.delFlag"
          placeholder="逻辑删除状态"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="创建时间" prop="createTime" v-if="dataForm.id">
        <el-input
          v-model="dataForm.createTime"
          placeholder="创建时间"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="更新时间" prop="updateTime" v-if="dataForm.id">
        <el-input
          v-model="dataForm.updateTime"
          placeholder="更新时间"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="创建者" prop="createBy" v-if="dataForm.id">
        <el-input
          v-model="dataForm.createBy"
          placeholder="创建者"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="更新人" prop="updateBy" v-if="dataForm.id">
        <el-input
          v-model="dataForm.updateBy"
          placeholder="更新人"
          disabled
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit"
        >确定</el-button
      >
    </span>
    <el-upload
      class="upload-demo"
      v-if="!dataForm.id"
      :auto-upload="false"
      :http-request="uploadSectionFile"
      action="fakeaction"
      ref="upload"
      :multiple = "false"
      :limit = "1"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传后缀是图片的文件</div>
    </el-upload>
  </el-dialog>
</template>

<script>
import { getObj, addObj, putObj } from "@/api/sysimage";

export default {
  data() {
    return {
      visible: false,
      canSubmit: false,
      dataForm: {
        id: 0,
        fileName: "",
        original: "",
        imgUrl: "",
        thumbUrl: "",
        type: "",
        fileSize: "",
        delFlag: "",
        createTime: "",
        updateTime: "",
        createBy: "",
        updateBy: "",
      },
      dataRule: {
        fileName: [
          { required: true, message: "图片名字不能为空", trigger: "blur" },
        ],
        original: [
          {
            required: true,
            message: "真实保存的名字不能为空",
            trigger: "blur",
          },
        ],
        imgUrl: [
          { required: true, message: "图片url不能为空", trigger: "blur" },
        ],
        thumbUrl: [
          { required: true, message: "缩略图不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "图片类型不能为空", trigger: "blur" },
        ],
        fileSize: [
          { required: true, message: "文件大小不能为空", trigger: "blur" },
        ],
        delFlag: [
          { required: true, message: "逻辑删除状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /**新增图片(上传图片) */
    uploadSectionFile(parm) {
      const form = new FormData();
      form.append("file", parm.file);
      addObj(form, this.dataForm.fileName)
        .then((data) => {
          if(data.data.code == 0){
            this.$notify.success("添加成功");
            this.visible = false;
            this.$emit("refreshDataList");
          }else{

          }
        })
        .catch(() => {
          this.canSubmit = true;
        });
    },
    init(id) {
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (id) {
          getObj(id).then((response) => {
            this.dataForm = response.data.data;
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            putObj(this.dataForm)
              .then((data) => {
                this.$notify.success("修改成功");
                this.visible = false;
                this.$emit("refreshDataList");
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            this.$refs.upload.submit();
            // addObj(this.dataForm)
            // // 这里的代码需要修改
            //   .then((data) => {
            //     this.$notify.success("添加成功");
            //     this.visible = false;
            //     this.$emit("refreshDataList");
            //   })
            //   .catch(() => {
            //     this.canSubmit = true;
            //   });
          }
        }
      });
    },
    //重置表单
    closeDialog() {
      this.$refs["dataForm"].resetFields();
    },
  },
};
</script>
